<template>
    <div class="tabspane-wrap">
        <el-tabs v-model="tabActive" @tab-click="tabClick">
            <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name">
                <slot name="tabsDetail" v-if="tabActive==item.name"></slot>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
//   import {mapGetters, mapState} from "vuex";

  export default {
    name: "tabspane",
    props: {
        tabList: {
            type: Array,
            require: true
        }
    },
    data() {
      return {
          tabActive: this.tabList[0].name
      };
    },
    created() {
        // console.log(this.tabList)
    },
    mounted() {

    },
    computed: {
    //   ...mapGetters(["tagWel", "tagList", "tag", "website", "tabList", "screen", "menu"]),
    //   ...mapState({
    //     showTag: state => state.common.showTag
    //   })
    },
    methods: {
        tabClick(tab, event) {
            // this.$parent.changeTabsPane(tab);
            this.$emit('changeTabsPane', tab);
        },
        changeActive(name) {
            this.tabActive = name
        }
    }
  };
</script>
<style lang="scss">
// .tabspane-wrap {
    // margin-top: -22px;
// }
</style>
